import React, { useEffect, useState } from "react";
import { Drawer, Button, Select, Form, message } from "antd";
import UserSession from "@/UserSession";
import { connect } from "dva";
import { doMoveDialog, FetchDialogInfo, knowledgeDialogInfo, knowledgeDialogCategoryInfo } from "@/services/dialog";

const { Option } = Select;

const ClassModal = (props) => {
	const { categoryId, visible, handleCancel, form, id, dialogId, dispatch } = props;
	const { getFieldDecorator } = form;

	const [category, setCategory] = useState([]);
	const [loading, setLoading] = useState(false);
	const [dialogInfo, setDialogInfo] = useState({});

	const getCategory = async () => {
		if(UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogCategoryInfo({ categoryId: id });
			// console.log(res);
			setCategory(res);
		} else {
			dispatch({
				type: "dialogLists/getDialogCategory",
				payload: {
					categoryId: id,
					urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
				},
				callback: (res) => {
					setCategory(res);
				},
			});
		}
	};

	const getDialogInfo = async () => {
		let res = null;
		if (UserSession.isSystemKnowledge()) {
			res = await knowledgeDialogInfo({ dialogId });
		} else {
			res = await FetchDialogInfo({ id: dialogId });
		};
		setDialogInfo(res);
		getCategory();
	};

	useEffect(() => {
		getDialogInfo();
	}, [visible]);

	const handleOk = (e) => {
		props.form.validateFields(async (err, values) => {
			if (!err) {
				setLoading(true);
				const res = await doMoveDialog({
					id: dialogId,
					categoryId: values.categoryId,
				});
				setLoading(false);
				if (res.data == undefined) {
					message.success(res.message);
					handleCancel();
				} else {
					message.error(res.message);
				}
			}
		});
	};

	const formItemLayout = {
		labelCol: {
			xs: { span: 24 },
			sm: { span: 4 },
		},
		wrapperCol: {
			xs: { span: 24 },
			sm: { span: 20 },
		},
	};
	return (
		<Drawer
			title='移动分类'
			visible={visible}
			onOk={handleOk}
			onClose={handleCancel}
			placement='right'
			width='750'
			headerStyle={{
				background: "#F7F9FD",
			}}>
			<Form {...formItemLayout}>
				<Form.Item label='移动分类至'>
					{getFieldDecorator("categoryId", {
						rules: [
							{
								required: true,
								message: "请选择分类",
							},
						],
						initialValue: dialogInfo?.categoryId,
					})(
						<Select style={{ width: 250 }}>
							{category.map((item, index) => {
								return <Option value={item.id} key={index}>{item.name}</Option>;
							})}
						</Select>
					)}
				</Form.Item>
			</Form>
			<div
				style={{
					position: "absolute",
					bottom: 0,
					width: "100%",
					borderTop: "1px solid #e8e8e8",
					padding: "10px 16px",
					textAlign: "right",
					left: 0,
					background: "#fff",
					borderRadius: "0 0 4px 4px",
				}}>
				<Button
					style={{
						marginRight: 8,
					}}
					onClick={handleCancel}>
					取消
				</Button>
				<Button onClick={handleOk} type='primary' loading={loading}>
					确定
				</Button>
			</div>
		</Drawer>
	);
};

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(ClassModal));
